<%--
  Created by IntelliJ IDEA.
  User: 0927
  Date: 2020/9/28
  Time: 12:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<%--    <link href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">
<link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">

<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales</title>
    <link href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/plugins/jquery/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>


<!-- 顶部导航start -->
<div id="nva">

</div>

<!-- 顶部导航end -->
<%--<div class="container-fluid">--%>
<%--    <nav class="navbar navbar-default navbar-static-top" role="navigation">--%>
<%--        <div class="container-fluid" style="background-color: white;">--%>
<%--            <div class="navbar-header">--%>
<%--                <a class="navbar-brand" href="#">精翼二手车</a>--%>
<%--            </div>--%>
<%--            <div>--%>
<%--                <!--向左对齐-->--%>

<%--                <!-- <form class="navbar-form navbar-left" role="search">--%>
<%--                    <button type="submit" class="btn btn-default">--%>
<%--                    向左对齐-提交按钮--%>
<%--                </button>--%>
<%--                </form> -->--%>
<%--                <p class="navbar-text navbar-left">欢迎销售：<span style="font-weight: bold;color: red">${name}</span></p>--%>
<%--                <!--向右对齐-->--%>
<%--                <ul class="nav navbar-nav navbar-right">--%>
<%--                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li>--%>
<%--                    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li>--%>
<%--                    <!-- <span class="badge">3</span> -->--%>
<%--                    <li class="dropdown">--%>
<%--                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">--%>
<%--                            销售员中心 <b class="caret"></b>--%>
<%--                        </a>--%>
<%--                        <ul class="dropdown-menu">--%>
<%--                            <li><a href="#">个人资料</a></li>--%>
<%--                            <li><a href="#">修改头像</a></li>--%>
<%--                            <li><a href="#">设置</a></li>--%>
<%--                            <li class="divider"></li>--%>
<%--                            <li><a href="${pageContext.request.contextPath}/logAndRegist/exit">安全退出</a></li>--%>
<%--                            <li class="divider"></li>--%>

<%--                        </ul>--%>
<%--                    </li>--%>
<%--                </ul>--%>

<%--            </div>--%>
<%--        </div>--%>
<%--    </nav>--%>
<%--</div>--%>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" id="myNav">
                <li><a href="#section-1">预约处理</a></li>
                <li><a href="#section-5">预约成功</a></li>
                <li><a href="#section-2">砍价处理</a></li>
                <li><a href="#section-3">负责车辆</a></li>
                <li><a href="#section-4">交易记录</a></li>
            </ul>
        </div>
        <div class="col-md-10">

            <h3 id="section-1">预约处理</h3>
            <div id="outer"></div>

            <br>
            <hr>
            <h3 id="section-5">预约成功</h3>
            <div id="yok"></div>

            <br>
            <hr>
            <h3 id="section-2">砍价处理</h3>
            <div id="kanjia"></div>

            <br>
            <hr>
            <h3 id="section-3">负责车辆</h3>
            <div id="tcar"></div>


            <br>
            <hr>
            <h3 id="section-4">交易记录</h3>
            <div id="trecord"></div>

        </div>
    </div>
</div>



<!-- /.modal -->

<script>
    let selid=${selid};

    $(function(){
        $("#nva").load("${pageContext.request.contextPath}/loadJsp/toNav")
        $("#outer").load("${pageContext.request.contextPath}/seller/view",{id:selid})
        $("#yok").load("${pageContext.request.contextPath}/seller/yok",{id:selid})
        $("#kanjia").load("${pageContext.request.contextPath}/seller/kanjia",{id:selid})
        $("#tcar").load("${pageContext.request.contextPath}/seller/tcar",{id:selid})
        $("#trecord").load("${pageContext.request.contextPath}/seller/trecord",{id:selid})
    })





</script>
<style>
    /* Custom Styles */

    ul.nav-tabs {
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }

    ul.nav-tabs li {
        margin: 0;
        border-top: 1px solid #ddd;
    }

    ul.nav-tabs li:first-child {
        border-top: none;
    }

    ul.nav-tabs li a {
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }

    ul.nav-tabs li.active a,
    ul.nav-tabs li.active a:hover {
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }

    ul.nav-tabs li:first-child a {
        border-radius: 4px 4px 0 0;
    }

    ul.nav-tabs li:last-child a {
        border-radius: 0 0 4px 4px;
    }

    ul.nav-tabs.affix {
        top: 30px;
        /* Set the top position of pinned element */
    }
</style>
<script>

    $(document).ready(function() {
        $("#myNav").affix({
            offset: {
                top: 515
            }
        });

        var myChart = echarts.init(document.getElementById('main3'));
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '30%']
            },
            visualMap: {
                type: 'piecewise',
                show: false,
                dimension: 0,
                seriesIndex: 0,
                pieces: [{
                    gt: 1,
                    lt: 3,
                    color: 'rgba(0, 180, 0, 0.5)'
                }, {
                    gt: 5,
                    lt: 7,
                    color: 'rgba(0, 180, 0, 0.5)'
                }]
            },
            series: [{
                type: 'line',
                smooth: 0.6,
                symbol: 'none',
                lineStyle: {
                    color: 'green',
                    width: 5
                },
                markLine: {
                    symbol: ['none', 'none'],
                    label: {
                        show: false
                    },
                    data: [{
                        xAxis: 1
                    }, {
                        xAxis: 3
                    }, {
                        xAxis: 5
                    }, {
                        xAxis: 7
                    }]
                },
                areaStyle: {},
                data: [
                    ['2019-10-10', 200],
                    ['2019-10-11', 400],
                    ['2019-10-12', 650],
                    ['2019-10-13', 500],
                    ['2019-10-14', 250],
                    ['2019-10-15', 300],
                    ['2019-10-16', 450],
                    ['2019-10-17', 300],
                    ['2019-10-18', 100]
                ]
            }]
        };
    })

    myChart.setOption(option);
</script>

</body>

</html>
